<template>
  <div class="evolution-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">进化图鉴</h1>
      <p class="page-subtitle">探索宝可梦的进化奥秘</p>
    </div>

    <!-- 上半部分：进化展示区 -->
    <div class="evolution-display-section">
      <!-- 展示模式切换按钮 - 移动到右上角 -->
      <div v-if="selectedPokemon" class="display-mode-controls">
        <button 
          class="mode-toggle-btn"
          :class="{ active: !showComparisonMode }"
          @click="showComparisonMode = false"
        >
          <i class="icon-single"></i>
          单独展示
        </button>
        <button 
          class="mode-toggle-btn"
          :class="{ active: showComparisonMode }"
          @click="showComparisonMode = true"
          v-if="targetPokemon"
        >
          <i class="icon-compare"></i>
          对比展示
        </button>
      </div>
      
      <!-- 特效层 -->
      <div v-if="showEffect" class="evolution-effect-overlay" :class="`effect-${effectType}`">
        <div class="effect-flash"></div>
        <div class="effect-glow"></div>
      </div>
      
      <!-- 有选中宝可梦时的展示 -->
      <div v-if="selectedPokemon" class="evolution-comparison">

        <!-- 单独展示模式 -->
        <div v-if="!showComparisonMode" class="single-display-mode">
          <div class="pokemon-display-container">
            <!-- 宝可梦图片 -->
            <div class="pokemon-image-wrapper">
              <img 
                :src="selectedPokemon.imageUrl" 
                :alt="selectedPokemon.name"
                class="pokemon-main-image"
                @error="handleImageError"
              />
            </div>
            
            <!-- 宝可梦姓名 -->
            <div class="pokemon-name-section">
              <h2 class="pokemon-display-name">{{ selectedPokemon.name }}</h2>
            </div>
            
            <!-- 宝可梦属性 -->
            <div class="pokemon-types-section">
              <span v-for="type in selectedPokemon.types" :key="type" class="type-badge" :class="`type-${type}`">{{ type }}</span>
            </div>
            
            <!-- 操作按钮 -->
            <div class="pokemon-actions-section">
              <div v-if="evolutionActions && evolutionActions.length > 0" class="action-buttons">
                <button 
                  v-for="action in evolutionActions" 
                  :key="action.id"
                  class="evolution-btn"
                  :class="{
                    'btn-devolve': action.type === 'devolve',
                    'btn-evolve': action.type === 'evolve',
                    'btn-form': action.type === 'form'
                  }"
                  @click="executeAction(action)"
                  :disabled="actionLoading"
                >
                  <span class="btn-text">{{ action.label }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 对比展示模式 -->
        <div v-else class="comparison-display-mode">
          <div class="cards-container">
            <!-- 当前宝可梦卡片 -->
            <div class="pokemon-evolution-card" :style="{ background: `linear-gradient(145deg, ${getPrimaryTypeColor(selectedPokemon)}, rgba(248, 249, 250, 0.8))` }">
              <div class="card-header" :style="{ backgroundColor: getStageColor(selectedPokemon.evolutionStage) }">
                <div class="evolution-stage-label">{{ getStageText(selectedPokemon.evolutionStage, selectedPokemon, isFormMode) }}</div>
              </div>
              <div class="card-body">
                <div class="pokemon-image-section">
                  <img 
                    :src="selectedPokemon.imageUrl" 
                    :alt="selectedPokemon.name"
                    class="pokemon-avatar"
                    @error="handleImageError"
                  />
                  <div class="pokemon-info">
                    <div class="pokemon-name">{{ selectedPokemon.name }}</div>
                    <div class="pokemon-types">
                      <span v-for="type in selectedPokemon.types" :key="type" class="type-badge" :class="`type-${type}`">{{ type }}</span>
                    </div>
                  </div>
                </div>
                <div class="pokemon-stats">
                  <div class="stat-item">
                    <span class="stat-label">HP</span>
                    <span class="stat-value" :class="getStatComparisonClass('hp', selectedPokemon, targetPokemon)">{{ selectedPokemon.stats.hp }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">攻击</span>
                    <span class="stat-value" :class="getStatComparisonClass('attack', selectedPokemon, targetPokemon)">{{ selectedPokemon.stats.attack }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">防御</span>
                    <span class="stat-value" :class="getStatComparisonClass('defense', selectedPokemon, targetPokemon)">{{ selectedPokemon.stats.defense }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">特攻</span>
                    <span class="stat-value" :class="getStatComparisonClass('spAttack', selectedPokemon, targetPokemon)">{{ selectedPokemon.stats.spAttack }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">特防</span>
                    <span class="stat-value" :class="getStatComparisonClass('spDefense', selectedPokemon, targetPokemon)">{{ selectedPokemon.stats.spDefense }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">速度</span>
                    <span class="stat-value" :class="getStatComparisonClass('speed', selectedPokemon, targetPokemon)">{{ selectedPokemon.stats.speed }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 进化箭头 -->
            <div class="evolution-arrow-container" v-if="targetPokemon">
              <div class="evolution-arrow">→</div>
            </div>

            <!-- 目标宝可梦卡片 -->
            <div v-if="targetPokemon" class="pokemon-evolution-card" :style="{ background: `linear-gradient(145deg, ${getPrimaryTypeColor(targetPokemon)}, rgba(248, 249, 250, 0.8))` }">
              <div class="card-header" :style="{ backgroundColor: getStageColor(targetPokemon.evolutionStage) }">
                <div class="evolution-stage-label">{{ getStageText(targetPokemon.evolutionStage, targetPokemon, isFormMode) }}</div>
              </div>
              <div class="card-body">
                <div class="pokemon-image-section">
                  <img 
                    :src="targetPokemon.imageUrl" 
                    :alt="targetPokemon.name"
                    class="pokemon-avatar"
                    @error="handleImageError"
                  />
                  <div class="pokemon-info">
                    <div class="pokemon-name">{{ targetPokemon.name }}</div>
                    <div class="pokemon-types">
                      <span v-for="type in targetPokemon.types" :key="type" class="type-badge" :class="`type-${type}`">{{ type }}</span>
                    </div>
                  </div>
                </div>
                <div class="pokemon-stats">
                  <div class="stat-item">
                    <span class="stat-label">HP</span>
                    <span class="stat-value" :class="getStatComparisonClass('hp', targetPokemon, selectedPokemon)">{{ targetPokemon.stats.hp }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">攻击</span>
                    <span class="stat-value" :class="getStatComparisonClass('attack', targetPokemon, selectedPokemon)">{{ targetPokemon.stats.attack }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">防御</span>
                    <span class="stat-value" :class="getStatComparisonClass('defense', targetPokemon, selectedPokemon)">{{ targetPokemon.stats.defense }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">特攻</span>
                    <span class="stat-value" :class="getStatComparisonClass('spAttack', targetPokemon, selectedPokemon)">{{ targetPokemon.stats.spAttack }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">特防</span>
                    <span class="stat-value" :class="getStatComparisonClass('spDefense', targetPokemon, selectedPokemon)">{{ targetPokemon.stats.spDefense }}</span>
                  </div>
                  <div class="stat-item">
                    <span class="stat-label">速度</span>
                    <span class="stat-value" :class="getStatComparisonClass('speed', targetPokemon, selectedPokemon)">{{ targetPokemon.stats.speed }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 未选择宝可梦时的展示 -->
      <div v-else class="empty-evolution-display">
        <div class="evolution-prompt">
          <div class="prompt-icon">🔄</div>
          <p class="prompt-message">请先从下方选择一个宝可梦，然后查看它的进化信息</p>
        </div>
      </div>
    </div>

    <!-- 下半部分：宝可梦选择区 -->
    <div class="pokemon-selection-section">
      <div class="section-title">进化宝可梦</div>
      
      <!-- 筛选工具栏 -->
      <div class="filter-toolbar">
        <!-- 属性筛选 -->
        <div class="type-filters">
          <button 
            v-for="type in pokemonTypes" 
            :key="type"
            class="type-filter-btn"
            :class="{ active: selectedType === type, ...getTypeClass(type) }"
            @click="filterByType(type)"
          >
            {{ type }}
          </button>
          <button 
            class="type-filter-btn all"
            :class="{ active: selectedType === null }"
            @click="clearTypeFilter"
          >
            全部
          </button>
        </div>
        
        <!-- 搜索框 -->
        <div class="search-container">
          <input 
            v-model="searchQuery"
            type="text"
            placeholder="搜索宝可梦..."
            class="search-input"
          />
          <div class="search-icon">🔍</div>
        </div>
      </div>

      <!-- 宝可梦网格 -->
      <div class="pokemon-grid">
        <div 
          v-for="pokemon in filteredPokemonList" 
          :key="pokemon.id"
          class="pokemon-grid-item"
          :class="{ selected: selectedPokemon && selectedPokemon.id === pokemon.id }"
          :style="{ backgroundColor: getPrimaryTypeColor(pokemon) }"
          @click="selectPokemon(pokemon)"
        >
          <div class="grid-pokemon-image">
            <img 
              :src="pokemon.imageUrl" 
              :alt="pokemon.name"
              @error="handleImageError"
            />
          </div>
          <div class="grid-pokemon-number">#{{ pokemon.number }}</div>
          <div class="grid-pokemon-name">{{ pokemon.name }}</div>
          <div class="grid-pokemon-types">
            <span 
              v-for="type in pokemon.types" 
              :key="type"
              class="grid-type-badge"
              :class="getTypeClass(type)"
            >
              {{ type }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const selectedPokemon = ref(null)
const targetPokemon = ref(null)
const evolutionActions = ref([])
const actionLoading = ref(false)
const selectedType = ref(null)
const searchQuery = ref('')
const isFormMode = ref(false)

// 对比模式状态
const showComparisonMode = ref(false)

// 特效状态
const effectType = ref('')
const showEffect = ref(false)

// 模拟数据
const mockPokemonData = ref([
  {
    id: 1,
    number: '001',
    name: '妙蛙种子',
    types: ['草', '毒'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png',
    canEvolve: true,
    evolutionTarget: 2,
    description: '种子宝可梦。背上背着大种子，为了让种子长大，会在阳光下进行光合作用。',
    stats: {
      hp: 45,
      attack: 49,
      defense: 49,
      spAttack: 65,
      spDefense: 65,
      speed: 45
    }
  },
  {
    id: 2,
    number: '002',
    name: '妙蛙草',
    types: ['草', '毒'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/2.png',
    canEvolve: true,
    evolutionTarget: 3,
    devolutionTarget: 1,
    description: '种子宝可梦。背上的花苞接受阳光后，会散发出甜美的香味，这种香味能够提高情绪。',
    stats: {
      hp: 60,
      attack: 62,
      defense: 63,
      spAttack: 80,
      spDefense: 80,
      speed: 60
    }
  },
  {
    id: 3,
    number: '003',
    name: '妙蛙花',
    types: ['草', '毒'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/3.png',
    canEvolve: false,
    devolutionTarget: 2,
    hasForms: true,
    formTarget: 4,
    description: '种子宝可梦。花朵会散发出浓郁的香味，香味越浓郁，表示它越健康。',
    stats: {
      hp: 80,
      attack: 82,
      defense: 83,
      spAttack: 100,
      spDefense: 100,
      speed: 80
    }
  },
  {
    id: 4,
    number: '003',
    name: '超级妙蛙花',
    types: ['草', '毒'],
    evolutionStage: 2,
    imageUrl: 'https://www.pokemon.cn/play/resources/pokedex/img/pm/3bfcc4360c44f37815dc1e59f75818935cbfc41b.png',
    canEvolve: false,
    devolutionTarget: 2,
    hasForms: true,
    formTarget: 3,
    isMegaForm: true,
    isAlternateForm: true,
    description: '超级进化后的妙蛙花，背上的花朵变得更加巨大，香味也更加浓郁，拥有强大的草属性力量。',
    stats: {
      hp: 80,
      attack: 100,
      defense: 123,
      spAttack: 122,
      spDefense: 120,
      speed: 80
    }
  },
  // 小火龙进化链 - 火属性
  {
    id: 5,
    number: '004',
    name: '小火龙',
    types: ['火'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png',
    canEvolve: true,
    evolutionTarget: 6,
    description: '蜥蜴宝可梦。尾巴上燃烧着火焰，当它健康时，火焰会燃烧得更加旺盛。',
    stats: {
      hp: 39,
      attack: 52,
      defense: 43,
      spAttack: 60,
      spDefense: 50,
      speed: 65
    }
  },
  {
    id: 6,
    number: '005',
    name: '火恐龙',
    types: ['火'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/5.png',
    canEvolve: true,
    evolutionTarget: 7,
    devolutionTarget: 5,
    description: '火焰宝可梦。性格粗暴，在战斗中会用尖锐的爪子撕裂敌人，火焰的温度极高。',
    stats: {
      hp: 58,
      attack: 64,
      defense: 58,
      spAttack: 80,
      spDefense: 65,
      speed: 80
    }
  },
  {
    id: 7,
    number: '006',
    name: '喷火龙',
    types: ['火', '飞行'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/6.png',
    canEvolve: false,
    devolutionTarget: 6,
    hasForms: true,
    formTarget: 8,
    description: '火焰宝可梦。会喷出能够融化一切的高温火焰，据说火焰的温度会随着经验的积累而上升。',
    stats: {
      hp: 78,
      attack: 84,
      defense: 78,
      spAttack: 109,
      spDefense: 85,
      speed: 100
    }
  },
  {
    id: 8,
    number: '006',
    name: '超级喷火龙X',
    types: ['火', '龙'],
    evolutionStage: 2,
    imageUrl: 'https://www.pokemon.cn/play/resources/pokedex/img/pm/ca3db4aad5c85a525d9be86852b26db1db7a22c0.png',
    canEvolve: false,
    devolutionTarget: 6,
    hasForms: true,
    formTarget: 33,
    isMegaForm: true,
    isAlternateForm: true,
    description: '超级进化后的喷火龙，获得了龙属性，火焰变成了蓝色，攻击力大幅提升。',
    stats: {
      hp: 78,
      attack: 130,
      defense: 111,
      spAttack: 130,
      spDefense: 85,
      speed: 100
    }
  },
  {
    id: 33,
    number: '006',
    name: '超级喷火龙Y',
    types: ['火', '飞行'],
    evolutionStage: 2,
    imageUrl: 'https://www.pokemon.cn/play/resources/pokedex/img/pm/0aa78a0061bda9d88cbb0bbf739cd9cc56522fe9.png',
    canEvolve: false,
    devolutionTarget: 6,
    hasForms: true,
    formTarget: 8,
    isMegaForm: true,
    isAlternateForm: true,
    description: '超级进化后的喷火龙，保持火/飞行属性，特攻能力大幅提升，火焰威力更加强大。',
    stats: {
      hp: 78,
      attack: 104,
      defense: 78,
      spAttack: 159,
      spDefense: 115,
      speed: 100
    }
  },
  // 杰尼龟进化链 - 水属性
  {
    id: 9,
    number: '007',
    name: '杰尼龟',
    types: ['水'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/7.png',
    canEvolve: true,
    evolutionTarget: 10,
    description: '小龟宝可梦。龟壳会随着年龄增长而变硬，能够承受强力的攻击。',
    stats: {
      hp: 44,
      attack: 48,
      defense: 65,
      spAttack: 50,
      spDefense: 64,
      speed: 43
    }
  },
  {
    id: 10,
    number: '008',
    name: '卡咪龟',
    types: ['水'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/8.png',
    canEvolve: true,
    evolutionTarget: 11,
    devolutionTarget: 9,
    description: '乌龟宝可梦。被毛茸茸的尾巴覆盖，尾巴的颜色会随着年龄的增长而变深。',
    stats: {
      hp: 59,
      attack: 63,
      defense: 80,
      spAttack: 65,
      spDefense: 80,
      speed: 58
    }
  },
  {
    id: 11,
    number: '009',
    name: '水箭龟',
    types: ['水'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/9.png',
    canEvolve: false,
    devolutionTarget: 10,
    description: '甲壳宝可梦。从龟壳的喷射孔中喷出的水流，威力足以击穿厚厚的钢板。',
    stats: {
      hp: 79,
      attack: 83,
      defense: 100,
      spAttack: 85,
      spDefense: 105,
      speed: 78
    }
  },
  // 皮卡丘进化链 - 电属性
  {
    id: 12,
    number: '025',
    name: '皮卡丘',
    types: ['电'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png',
    canEvolve: true,
    evolutionTarget: 13,
    devolutionTarget: 14,
    description: '鼠宝可梦。脸颊两侧的囊袋中储存着电力，受到刺激时会放电。',
    stats: {
      hp: 35,
      attack: 55,
      defense: 40,
      spAttack: 50,
      spDefense: 50,
      speed: 90
    }
  },
  {
    id: 13,
    number: '026',
    name: '雷丘',
    types: ['电'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/26.png',
    canEvolve: false,
    devolutionTarget: 12,
    description: '鼠宝可梦。身体能够储存10万伏特的电力，被这种电力击中的话会失去知觉。',
    stats: {
      hp: 60,
      attack: 90,
      defense: 55,
      spAttack: 90,
      spDefense: 80,
      speed: 110
    }
  },
  {
    id: 14,
    number: '172',
    name: '皮丘',
    types: ['电'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/172.png',
    canEvolve: true,
    evolutionTarget: 12,
    description: '小鼠宝可梦。还不能很好地控制电力，经常会电到自己。',
    stats: {
      hp: 20,
      attack: 40,
      defense: 15,
      spAttack: 35,
      spDefense: 35,
      speed: 60
    }
  },
  // 凯西进化链 - 超能力属性
  {
    id: 15,
    number: '063',
    name: '凯西',
    types: ['超能力'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/63.png',
    canEvolve: true,
    evolutionTarget: 16,
    description: '念力宝可梦。一天要睡18个小时，睡觉时也会使用念力来保护自己。',
    stats: {
      hp: 25,
      attack: 20,
      defense: 15,
      spAttack: 105,
      spDefense: 55,
      speed: 90
    }
  },
  {
    id: 16,
    number: '064',
    name: '勇基拉',
    types: ['超能力'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/64.png',
    canEvolve: true,
    evolutionTarget: 17,
    devolutionTarget: 15,
    description: '念力宝可梦。发出强力的α波，靠近的人会头痛，所以通常独自生活。',
    stats: {
      hp: 40,
      attack: 35,
      defense: 30,
      spAttack: 120,
      spDefense: 70,
      speed: 105
    }
  },
  {
    id: 17,
    number: '065',
    name: '胡地',
    types: ['超能力'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/65.png',
    canEvolve: false,
    devolutionTarget: 16,
    description: '念力宝可梦。大脑每天都在成长，拥有能够记住从出生到死亡所有事情的记忆力。',
    stats: {
      hp: 55,
      attack: 50,
      defense: 45,
      spAttack: 135,
      spDefense: 95,
      speed: 120
    }
  },
  // 腕力进化链 - 格斗属性
  {
    id: 18,
    number: '066',
    name: '腕力',
    types: ['格斗'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/66.png',
    canEvolve: true,
    evolutionTarget: 19,
    description: '怪力宝可梦。虽然身体小，但是力气很大，能够轻松举起100个成年人。',
    stats: {
      hp: 70,
      attack: 80,
      defense: 50,
      spAttack: 35,
      spDefense: 35,
      speed: 35
    }
  },
  {
    id: 19,
    number: '067',
    name: '豪力',
    types: ['格斗'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/67.png',
    canEvolve: true,
    evolutionTarget: 20,
    devolutionTarget: 18,
    description: '怪力宝可梦。肌肉发达，即使被卡车撞到也不会受伤，反而会把卡车撞飞。',
    stats: {
      hp: 80,
      attack: 100,
      defense: 70,
      spAttack: 50,
      spDefense: 60,
      speed: 45
    }
  },
  {
    id: 20,
    number: '068',
    name: '怪力',
    types: ['格斗'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/68.png',
    canEvolve: false,
    devolutionTarget: 19,
    description: '怪力宝可梦。拥有四条手臂，能够从各个角度连续出拳，一秒钟能打出500拳。',
    stats: {
      hp: 90,
      attack: 130,
      defense: 80,
      spAttack: 65,
      spDefense: 85,
      speed: 55
    }
  },
  // 波波进化链 - 一般/飞行属性
  {
    id: 21,
    number: '016',
    name: '波波',
    types: ['一般', '飞行'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/16.png',
    canEvolve: true,
    evolutionTarget: 22,
    description: '小鸟宝可梦。性格温顺，不喜欢战斗，经常躲在草丛中寻找小虫子。',
    stats: {
      hp: 40,
      attack: 45,
      defense: 40,
      spAttack: 35,
      spDefense: 35,
      speed: 56
    }
  },
  {
    id: 22,
    number: '017',
    name: '比比鸟',
    types: ['一般', '飞行'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/17.png',
    canEvolve: true,
    evolutionTarget: 23,
    devolutionTarget: 21,
    description: '鸟宝可梦。拥有出色的视力，无论多高都能发现地面上的猎物。',
    stats: {
      hp: 63,
      attack: 60,
      defense: 55,
      spAttack: 50,
      spDefense: 50,
      speed: 71
    }
  },
  {
    id: 23,
    number: '018',
    name: '大比鸟',
    types: ['一般', '飞行'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/18.png',
    canEvolve: false,
    devolutionTarget: 22,
    description: '鸟宝可梦。拥有美丽的羽毛和巨大的翅膀，能够连续飞行而不休息。',
    stats: {
      hp: 83,
      attack: 80,
      defense: 75,
      spAttack: 70,
      spDefense: 70,
      speed: 101
    }
  },
  // 绿毛虫进化链 - 虫属性
  {
    id: 24,
    number: '010',
    name: '绿毛虫',
    types: ['虫'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/10.png',
    canEvolve: true,
    evolutionTarget: 25,
    description: '幼虫宝可梦。食欲旺盛，一天能吃掉比自己体重还重的叶子。',
    stats: {
      hp: 45,
      attack: 30,
      defense: 35,
      spAttack: 20,
      spDefense: 20,
      speed: 45
    }
  },
  {
    id: 25,
    number: '011',
    name: '铁甲蛹',
    types: ['虫'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/11.png',
    canEvolve: true,
    evolutionTarget: 26,
    devolutionTarget: 24,
    description: '蛹宝可梦。外壳坚硬如钢铁，在进化期间几乎不会移动。',
    stats: {
      hp: 50,
      attack: 20,
      defense: 55,
      spAttack: 25,
      spDefense: 25,
      speed: 30
    }
  },
  {
    id: 26,
    number: '012',
    name: '巴大蝶',
    types: ['虫', '飞行'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/12.png',
    canEvolve: false,
    devolutionTarget: 25,
    description: '蝴蝶宝可梦。翅膀上覆盖着防水的细小鳞粉，即使在雨中也能飞行。',
    stats: {
      hp: 60,
      attack: 45,
      defense: 50,
      spAttack: 90,
      spDefense: 80,
      speed: 70
    }
  },
  // 小拳石进化链 - 岩石/地面属性
  {
    id: 27,
    number: '074',
    name: '小拳石',
    types: ['岩石', '地面'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/74.png',
    canEvolve: true,
    evolutionTarget: 28,
    description: '岩石宝可梦。身体坚硬如岩石，即使用炸药也很难炸碎。',
    stats: {
      hp: 40,
      attack: 80,
      defense: 100,
      spAttack: 30,
      spDefense: 30,
      speed: 20
    }
  },
  {
    id: 28,
    number: '075',
    name: '隆隆石',
    types: ['岩石', '地面'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/75.png',
    canEvolve: true,
    evolutionTarget: 29,
    devolutionTarget: 27,
    description: '岩石宝可梦。喜欢吃岩石，一天能吃掉一吨重的石头。',
    stats: {
      hp: 55,
      attack: 95,
      defense: 115,
      spAttack: 45,
      spDefense: 45,
      speed: 35
    }
  },
  {
    id: 29,
    number: '076',
    name: '隆隆岩',
    types: ['岩石', '地面'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/76.png',
    canEvolve: false,
    devolutionTarget: 28,
    description: '巨岩宝可梦。一年只脱一次皮，脱皮后身体会变得更加坚硬。',
    stats: {
      hp: 80,
      attack: 120,
      defense: 130,
      spAttack: 55,
      spDefense: 65,
      speed: 45
    }
  },
  // 鬼斯进化链 - 幽灵/毒属性
  {
    id: 30,
    number: '092',
    name: '鬼斯',
    types: ['幽灵', '毒'],
    evolutionStage: 0,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/92.png',
    canEvolve: true,
    evolutionTarget: 31,
    description: '气体宝可梦。身体由气体构成，会躲在墙壁中偷袭路过的人。',
    stats: {
      hp: 30,
      attack: 35,
      defense: 30,
      spAttack: 100,
      spDefense: 35,
      speed: 80
    }
  },
  {
    id: 31,
    number: '093',
    name: '鬼斯通',
    types: ['幽灵', '毒'],
    evolutionStage: 1,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/93.png',
    canEvolve: true,
    evolutionTarget: 32,
    devolutionTarget: 30,
    description: '气体宝可梦。喜欢躲在黑暗中，被它的手碰到会不停地颤抖直到死亡。',
    stats: {
      hp: 45,
      attack: 50,
      defense: 45,
      spAttack: 115,
      spDefense: 55,
      speed: 95
    }
  },
  {
    id: 32,
    number: '094',
    name: '耿鬼',
    types: ['幽灵', '毒'],
    evolutionStage: 2,
    imageUrl: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/94.png',
    canEvolve: false,
    devolutionTarget: 31,
    description: '影子宝可梦。躲在阴影中降低周围的温度，据说被它盯上的人会被夺走生命。',
    stats: {
      hp: 60,
      attack: 65,
      defense: 60,
      spAttack: 130,
      spDefense: 75,
      speed: 110
    }
  }
])

// 宝可梦属性列表
const pokemonTypes = ['草', '火', '水', '电', '超能力', '冰', '龙', '恶', '妖精', '格斗', '毒', '地面', '飞行', '虫', '岩石', '幽灵', '钢', '一般']

// 计算属性
const filteredPokemonList = computed(() => {
  let filtered = mockPokemonData.value
  
  // 按属性筛选
  if (selectedType.value) {
    filtered = filtered.filter(pokemon => 
      pokemon.types.includes(selectedType.value)
    )
  }
  
  // 按搜索关键词筛选
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.trim().toLowerCase()
    filtered = filtered.filter(pokemon => 
      pokemon.name.toLowerCase().includes(query) ||
      pokemon.number.includes(query)
    )
  }
  
  return filtered
})

// 方法
const selectPokemon = (pokemon) => {
  selectedPokemon.value = pokemon
  isFormMode.value = false // 重置为进化模式
  generateEvolutionActions(pokemon)
  
  // 滚动到上半部分
  document.querySelector('.evolution-display-section').scrollIntoView({ 
    behavior: 'smooth' 
  })
  
  // ElMessage.success(`已选择：${pokemon.name}`) // 移除选择宝可梦的提示
}

const generateEvolutionActions = (pokemon) => {
  const actions = []
  let target = null
  
  // 根据进化阶段生成操作按钮和目标宝可梦
  if (pokemon.evolutionStage === 0) {
    // 初始形态：只有进化按钮
    if (pokemon.canEvolve) {
      target = mockPokemonData.value.find(p => p.id === pokemon.evolutionTarget)
      actions.push({
        id: 'evolve',
        type: 'evolve',
        label: '进化',
        targetId: pokemon.evolutionTarget
      })
    }
  } else if (pokemon.evolutionStage === 1) {
    // 一阶形态：退化 + 进化，默认显示进化目标
    if (pokemon.canEvolve) {
      target = mockPokemonData.value.find(p => p.id === pokemon.evolutionTarget)
      actions.push({
        id: 'evolve',
        type: 'evolve',
        label: '进化',
        targetId: pokemon.evolutionTarget
      })
    }
    if (pokemon.devolutionTarget) {
      actions.unshift({
        id: 'devolve',
        type: 'devolve',
        label: '退化',
        targetId: pokemon.devolutionTarget
      })
    }
  } else if (pokemon.evolutionStage === 2) {
    // 二阶形态：退化 + 形态切换，默认显示形态目标
    if (pokemon.hasForms) {
      target = mockPokemonData.value.find(p => p.id === pokemon.formTarget)
      actions.push({
        id: 'form',
        type: 'form',
        label: '形态',
        targetId: pokemon.formTarget
      })
    }
    if (pokemon.devolutionTarget) {
      actions.unshift({
        id: 'devolve',
        type: 'devolve',
        label: '退化',
        targetId: pokemon.devolutionTarget
      })
    }
  }
  
  evolutionActions.value = actions
  targetPokemon.value = target
}

const executeAction = async (action) => {
  actionLoading.value = true
  
  try {
    // 设置特效类型
    effectType.value = action.type
    showEffect.value = true
    
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 设置形态模式状态
    isFormMode.value = action.type === 'form'
    
    // 查找目标宝可梦
    const newPokemon = mockPokemonData.value.find(p => p.id === action.targetId)
    
    if (newPokemon) {
      selectedPokemon.value = newPokemon
      generateEvolutionActions(newPokemon)
    } else {
      ElMessage.error('未找到目标宝可梦')
    }
  } catch (error) {
    ElMessage.error('操作失败，请稍后重试')
  } finally {
    actionLoading.value = false
    // 延迟隐藏特效
    setTimeout(() => {
      showEffect.value = false
    }, 300)
  }
}

const filterByType = (type) => {
  selectedType.value = selectedType.value === type ? null : type
}

const clearTypeFilter = () => {
  selectedType.value = null
}

const getTypeClass = (typeName) => {
  return {
    [`type-${typeName}`]: true
  }
}

const getStageText = (stage, pokemon, isFormMode = false) => {
  if (stage === 2 && isFormMode) {
    // 形态模式：区分形态一和形态二
    if (pokemon && pokemon.isAlternateForm) {
      return '形态二'
    } else {
      return '形态一'
    }
  }
  
  // 进化模式：显示传统的进化阶段
  const stageMap = {
    0: '初始形态',
    1: '一阶形态',
    2: '二阶形态'
  }
  return stageMap[stage] || '未知'
}

// 根据进化阶段获取对应的背景颜色
const getStageColor = (stage) => {
  const colorMap = {
    0: 'rgba(163, 217, 120, 0.5)',  // 初始形态：绿色 + 50%透明度
    1: 'rgba(91, 155, 213, 0.5)',   // 一阶形态：蓝色 + 50%透明度
    2: 'rgba(142, 110, 211, 0.5)'   // 二阶形态：紫色 + 50%透明度
  }
  return colorMap[stage] || 'rgba(163, 217, 120, 0.5)'  // 默认返回绿色 + 50%透明度
}

const getActionIcon = (type) => {
  const iconMap = {
    'evolve': '⬆️',
    'devolve': '⬇️',
    'form': '🔄'
  }
  return iconMap[type] || '❓'
}

// 属性颜色映射
const typeColors = {
  '一般': '#A8A878',
  '火': '#F08030',
  '水': '#6890F0',
  '电': '#F8D030',
  '草': '#78C850',
  '冰': '#98D8D8',
  '格斗': '#C03028',
  '毒': '#A040A0',
  '地面': '#E0C068',
  '飞行': '#A890F0',
  '超能力': '#F85888',
  '虫': '#A8B820',
  '岩石': '#B8A038',
  '幽灵': '#705898',
  '龙': '#7038F8',
  '恶': '#705848',
  '钢': '#B8B8D0',
  '妖精': '#EE99AC'
}

// 获取宝可梦主属性颜色（用于卡片背景）
const getPrimaryTypeColor = (pokemon) => {
  if (!pokemon?.types || pokemon.types.length === 0) {
    return '#A8A87815' // 默认一般系颜色，带透明度
  }
  
  // 获取第一个（主）属性的颜色
  const primaryType = pokemon.types[0]
  // 处理不同的数据格式：可能是字符串，也可能是对象
  const typeName = typeof primaryType === 'string' ? primaryType : (primaryType.typeName || primaryType.name || primaryType)
  const primaryColor = typeColors[typeName] || '#A8A878'
  
  // 返回带有透明度的颜色，使背景不会太深（使用15的十六进制透明度，约为8%）
  return `${primaryColor}15`
}

const handleImageError = (event) => {
  // 使用一个简单的SVG占位符
  event.target.src = ''
}

const getStatComparisonClass = (statName, currentPokemon, comparePokemon) => {
  if (!comparePokemon) return ''
  
  const currentValue = currentPokemon.stats[statName]
  const compareValue = comparePokemon.stats[statName]
  
  if (currentValue < compareValue) {
    return 'stat-lower'
  } else if (currentValue > compareValue) {
    return 'stat-higher'
  }
  return ''
}

// 生命周期
onMounted(() => {
  // 不再默认选择宝可梦，让用户自己选择
  // if (mockPokemonData.value.length > 0) {
  //   selectPokemon(mockPokemonData.value[0])
  // }

  
})
</script>

<style scoped>
.evolution-page {
  min-height: 100vh;
  background: linear-gradient(135deg);
  padding: 20px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

/* 页面标题 */
.page-header {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.page-title {
  font-size: 3.5rem;
  font-weight: bold;
  color: #2c5aa0;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-subtitle {
  font-size: 1.2rem;
  color: #666;
  margin: 10px 0 0 0;
  animation: fadeInUp 1s ease-out 0.2s both;
}

/* 上半部分：进化展示区 */
.evolution-display-section {
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: grid;
  place-items: center;
  grid-template-rows: 1fr;
  height: 600px;
  width: 80%;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* 进化对比布局 */
.evolution-comparison {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  height: 100%;
}



/* 展示模式切换按钮 - 右上角定位 */
.display-mode-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mode-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mode-toggle-btn.active {
  background: rgba(0, 123, 255, 0.8);
  border-color: rgba(0, 123, 255, 0.9);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.mode-toggle-btn .icon-single::before {
  content: "👁️";
}

.mode-toggle-btn .icon-compare::before {
  content: "⚖️";
}

/* 单独展示模式 */
.single-display-mode {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 新的单独展示布局 */
.pokemon-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  max-width: 500px;
  width: 100%;
}

.pokemon-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.pokemon-main-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.pokemon-main-image:hover {
  transform: scale(1.05);
}

.pokemon-name-section {
  text-align: center;
}

.pokemon-display-name {
  font-size: 2.8rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.pokemon-types-section {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pokemon-actions-section {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pokemon-actions-section .action-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.pokemon-showcase-card {
  border: 2px solid #e9ecef;
  border-radius: 25px;
  width: 100%;
  max-width: 700px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.pokemon-showcase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.pokemon-showcase-card .card-content {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 单独展示模式的按钮样式 */
.single-mode-actions {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.single-mode-actions .action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.pokemon-main-info {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.pokemon-image-container {
  flex-shrink: 0;
}

.pokemon-showcase-image {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.pokemon-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pokemon-showcase-card .pokemon-name {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.pokemon-description {
  background: rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 12px;
  border-left: 4px solid #007bff;
  margin-top: 10px;
}

.pokemon-description p {
  margin: 0;
  color: #495057;
  line-height: 1.6;
  font-size: 1rem;
}

.pokemon-stats-section {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stats-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0 20px 0;
  text-align: center;
}

.stats-grid {
  display: grid;
  gap: 15px;
}

.stat-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-name {
  font-weight: 600;
  color: #495057;
  font-size: 0.95rem;
}

.stat-value {
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.1rem;
}

.stat-progress {
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
  position: relative;
}

.stat-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.stat-fill.hp { background: linear-gradient(90deg, #ff6b6b, #ff5252); }
.stat-fill.attack { background: linear-gradient(90deg, #ff9800, #f57c00); }
.stat-fill.defense { background: linear-gradient(90deg, #2196f3, #1976d2); }
.stat-fill.sp-attack { background: linear-gradient(90deg, #9c27b0, #7b1fa2); }
.stat-fill.sp-defense { background: linear-gradient(90deg, #4caf50, #388e3c); }
.stat-fill.speed { background: linear-gradient(90deg, #ffeb3b, #fbc02d); }

/* 对比展示模式 */
.comparison-display-mode {
  width: 100%;
}

/* 卡片对比容器 */
.evolution-comparison {
  flex-direction: column;
}

.evolution-comparison .cards-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

/* 空状态布局 */
.empty-evolution-display {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 900px;
  height: 100%;
  min-height: 400px;
}

/* 进化提示样式 */
.evolution-prompt {
  text-align: center;
  padding: 40px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border: 2px solid #e9ecef;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
}

.evolution-prompt .prompt-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.7;
}

.evolution-prompt .prompt-message {
  font-size: 1.3rem;
  color: #666;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}

/* 宝可梦卡片样式 */
.pokemon-evolution-card,
.empty-pokemon-card {
  border: 2px solid #e9ecef;
  border-radius: 25px;
  width: 350px;
  height: 340px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 空状态卡片保持原来的背景 */
.empty-pokemon-card {
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
}



.card-header {
  border-bottom: none;
  padding: 18px;
  text-align: center;
  border-radius: 23px 23px 0 0;
  position: relative;
}

.evolution-stage-label {
  font-weight: bold;
  color: white;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
}

.card-body {
  flex: 1;
  display: flex;
  padding: 20px;
  gap: 20px;
  background: transparent;
  backdrop-filter: blur(10px);
}

.pokemon-image-section {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px;
}

.pokemon-avatar {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f0f2f5);
  display: block;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.pokemon-info {
  text-align: center;
}

.pokemon-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.pokemon-types {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

.type-badge {
  width: 40px;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 属性颜色 */
.type-草 { background: #78C850; }
.type-毒 { background: #A040A0; }
.type-火 { background: #F08030; }
.type-水 { background: #6890F0; }
.type-电 { background: #F8D030; }
.type-冰 { background: #98D8D8; }
.type-格斗 { background: #C03028; }
.type-地面 { background: #E0C068; }
.type-飞行 { background: #A890F0; }
.type-超能力 { background: #F85888; }
.type-虫 { background: #A8B820; }
.type-岩石 { background: #B8A038; }
.type-幽灵 { background: #705898; }
.type-龙 { background: #7038F8; }
.type-恶 { background: #705848; }
.type-钢 { background: #B8B8D0; }
.type-妖精 { background-color: #EE99AC; }
.type-一般 { background: #A8A878; }



.pokemon-stats,
.empty-stats {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  padding: 5px;
  font-size: 0.85rem;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.stat-label {
  font-weight: 600;
  color: #495057;
  font-size: 0.8rem;
}

.stat-value {
  font-weight: bold;
  color: #333;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.stat-value.stat-lower {
  color: #28a745;
  font-weight: 900;
}

.stat-value.stat-higher {
  color: #dc3545;
  font-weight: 900;
}



/* 进化箭头 */
.evolution-arrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.evolution-arrow {
  font-size: 3rem;
  font-weight: bold;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.evolution-arrow.empty {
  color: #ccc;
}



.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.evolution-btn {
  padding: 12px 30px;
  border: 2px solid #1890ff !important;
  border-radius: 25px;
  background: #1890ff !important;
  color: white !important;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
  /* 居中布局相关样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.evolution-btn:hover {
  background: transparent;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
}

.evolution-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-devolve {
  border-color: #f44336;
  color: #f44336;
}

.btn-devolve:hover {
  background: #f44336;
  color: white;
  box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
}

.btn-form {
  border-color: #4CAF50;
  color: #4CAF50;
}

.btn-form:hover {
  background: #4CAF50;
  color: white;
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

/* 空状态提示 */
.empty-actions {
  text-align: center;
  margin-top: 20px;
}

.empty-prompt {
  color: #666;
}

.prompt-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.prompt-text {
  font-size: 1.1rem;
}

/* 下半部分：宝可梦选择区 */
.pokemon-selection-section {
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 20px;
  min-height: 500px;
  width:80%;
  justify-content: center;
  margin: 0 auto;
}

.section-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 25px;
  text-align: center;
}

/* 筛选工具栏 */
.filter-toolbar {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25px;
  gap: 20px;
}

.type-filters {
  flex: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.type-filter-btn {
  padding: 8px 16px;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.9rem;
}

.type-filter-btn.active {
  color: #333;
  border-width: 3px;
  transform: scale(1.05);
}

/* 属性选中状态的边框颜色 */
.type-filter-btn.active.type-草 { border-color: #78C850; }
.type-filter-btn.active.type-毒 { border-color: #A040A0; }
.type-filter-btn.active.type-火 { border-color: #F08030; }
.type-filter-btn.active.type-水 { border-color: #6890F0; }
.type-filter-btn.active.type-电 { border-color: #F8D030; }
.type-filter-btn.active.type-冰 { border-color: #98D8D8; }
.type-filter-btn.active.type-格斗 { border-color: #C03028; }
.type-filter-btn.active.type-地面 { border-color: #E0C068; }
.type-filter-btn.active.type-飞行 { border-color: #A890F0; }
.type-filter-btn.active.type-超能力 { border-color: #F85888; }
.type-filter-btn.active.type-虫 { border-color: #A8B820; }
.type-filter-btn.active.type-岩石 { border-color: #B8A038; }
.type-filter-btn.active.type-幽灵 { border-color: #705898; }
.type-filter-btn.active.type-龙 { border-color: #7038F8; }
.type-filter-btn.active.type-恶 { border-color: #705848; }
.type-filter-btn.active.type-钢 { border-color: #B8B8D0; }
.type-filter-btn.active.type-妖精 { border-color: #EE99AC; }
.type-filter-btn.active.type-一般 { border-color: #A8A878; }

.type-filter-btn.all {
  background: #6c757d;
  color: white;
  border-color: #6c757d;
}

.type-filter-btn.all.active {
  background: #495057;
  border-color: #495057;
}

.search-container {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-input {
  width: 100%;
  padding: 12px 45px 12px 15px;
  border: 2px solid #ddd;
  border-radius: 25px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #667eea;
}

.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1.2rem;
}

/* 宝可梦网格 */
.pokemon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  gap: 20px;
  min-height: 200px;
  align-content: start;
  justify-content: center;
}

.pokemon-grid-item {
  width: 180px;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pokemon-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.pokemon-grid-item.selected {
  border-color: #667eea;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  border-width: 3px;
}

.grid-pokemon-image {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
}

.grid-pokemon-image img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle, #f8f9fa, #e9ecef);
  padding: 15px;
  border: 2px solid #e9ecef;
}

.grid-pokemon-number {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
  margin-bottom: 5px;
}

.grid-pokemon-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.grid-pokemon-types {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.grid-type-badge {
  padding: 4px 8px;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-size: 0.7rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 属性颜色 */
.grass { background-color: #78C850; }
.fire { background-color: #F08030; }
.water { background-color: #6890F0; }
.electric { background-color: #F8D030; }
.psychic { background-color: #F85888; }
.ice { background-color: #98D8D8; }
.dragon { background-color: #7038F8; }
.dark { background-color: #705848; }
.fairy { background-color: #EE99AC; }
.fighting { background-color: #C03028; }
.poison { background-color: #A040A0; }
.ground { background-color: #E0C068; }
.flying { background-color: #A890F0; }
.bug { background-color: #A8B820; }
.rock { background-color: #B8A038; }
.ghost { background-color: #705898; }
.steel { background-color: #B8B8D0; }
.normal { background-color: #A8A878; }

/* 响应式设计 */
@media (max-width: 768px) {
  .evolution-page {
    padding: 10px;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .pokemon-image {
    width: 150px;
    height: 150px;
  }
  
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .type-filters {
    justify-content: center;
  }
  
  .pokemon-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .evolution-btn {
    width: 100%;
    max-width: 200px;
  }
}

/* 特效样式 */
.effect-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* 进化特效 - 金色光芒 */
.effect-evolution .effect-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
  animation: evolutionParticles 0.8s ease-out;
}

.effect-evolution .effect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, rgba(255, 165, 0, 0.4) 50%, transparent 70%);
  border-radius: 50%;
  animation: evolutionGlow 0.8s ease-out;
}

.effect-evolution .effect-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border: 3px solid rgba(255, 215, 0, 0.8);
  border-radius: 50%;
  animation: evolutionRipple 0.8s ease-out;
}

/* 退化特效 - 蓝色逆转 */
.effect-devolution .effect-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.6) 0%, transparent 70%);
  animation: devolutionParticles 0.8s ease-out;
}

.effect-devolution .effect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.8) 0%, rgba(135, 206, 250, 0.4) 50%, transparent 70%);
  border-radius: 50%;
  animation: devolutionGlow 0.8s ease-out;
}

.effect-devolution .effect-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border: 3px solid rgba(30, 144, 255, 0.8);
  border-radius: 50%;
  animation: devolutionRipple 0.8s ease-out reverse;
}

/* 形态特效 - 紫色变幻 */
.effect-form .effect-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(138, 43, 226, 0.4) 0%, rgba(75, 0, 130, 0.4) 50%, rgba(148, 0, 211, 0.4) 100%);
  animation: formParticles 0.8s ease-out;
}

.effect-form .effect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.7) 0%, rgba(148, 0, 211, 0.4) 50%, transparent 70%);
  border-radius: 50%;
  animation: formGlow 0.8s ease-out;
}

.effect-form .effect-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border: 3px solid rgba(138, 43, 226, 0.8);
  border-radius: 50%;
  animation: formRipple 0.8s ease-out;
}

/* 进化动画关键帧 */
@keyframes evolutionParticles {
  0% { 
    opacity: 0; 
    transform: scale(0.5) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg); 
  }
  100% { 
    opacity: 0; 
    transform: scale(1.5) rotate(360deg); 
  }
}

@keyframes evolutionGlow {
  0% { 
    opacity: 0; 
    transform: scale(0); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.5); 
  }
  100% { 
    opacity: 0; 
    transform: scale(2); 
  }
}

@keyframes evolutionRipple {
  0% { 
    transform: scale(0); 
    opacity: 1; 
  }
  100% { 
    transform: scale(20); 
    opacity: 0; 
  }
}

/* 退化动画关键帧 */
@keyframes devolutionParticles {
  0% { 
    opacity: 0; 
    transform: scale(1.5) rotate(360deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0.5) rotate(0deg); 
  }
}

@keyframes devolutionGlow {
  0% { 
    opacity: 0; 
    transform: scale(2); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.5); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0); 
  }
}

@keyframes devolutionRipple {
  0% { 
    transform: scale(20); 
    opacity: 0; 
  }
  100% { 
    transform: scale(0); 
    opacity: 1; 
  }
}

/* 形态变换动画关键帧 */
@keyframes formParticles {
  0% { 
    opacity: 0; 
    transform: scaleX(0.5) scaleY(1.5); 
  }
  25% { 
    opacity: 0.7; 
    transform: scaleX(1.5) scaleY(0.5); 
  }
  50% { 
    opacity: 1; 
    transform: scaleX(0.8) scaleY(1.2); 
  }
  75% { 
    opacity: 0.7; 
    transform: scaleX(1.2) scaleY(0.8); 
  }
  100% { 
    opacity: 0; 
    transform: scaleX(1) scaleY(1); 
  }
}

@keyframes formGlow {
  0% { 
    opacity: 0; 
    transform: scale(0) rotate(0deg); 
  }
  33% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(120deg); 
  }
  66% { 
    opacity: 0.8; 
    transform: scale(1.2) rotate(240deg); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0) rotate(360deg); 
  }
}

@keyframes formRipple {
  0% { 
    transform: scale(0) rotate(0deg); 
    opacity: 1; 
    border-radius: 50%; 
  }
  50% { 
    transform: scale(10) rotate(180deg); 
    opacity: 0.5; 
    border-radius: 20%; 
  }
  100% { 
    transform: scale(15) rotate(360deg); 
    opacity: 0; 
    border-radius: 0%; 
  }
}

/* 简单特效系统 */
.evolution-effect-overlay {
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* 特效1：进化特效 - 金色闪光 */
.effect-evolve .effect-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: evolveFlash 0.8s ease-out;
}

.effect-evolve .effect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.2) 50%, transparent 70%);
  border-radius: 50%;
  animation: evolveGlow 0.8s ease-out;
}

/* 特效2：退化特效 - 蓝色闪光 */
.effect-devolve .effect-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: devolveFlash 0.8s ease-out;
}

.effect-devolve .effect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.4) 0%, rgba(135, 206, 250, 0.2) 50%, transparent 70%);
  border-radius: 50%;
  animation: devolveGlow 0.8s ease-out;
}

/* 特效3：形态特效 - 彩虹色闪光 */
.effect-form .effect-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  animation: formFlash 0.8s ease-out;
}

.effect-form .effect-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  background: linear-gradient(45deg, rgba(255, 0, 150, 0.3), rgba(0, 255, 255, 0.3), rgba(255, 255, 0, 0.3), rgba(255, 0, 150, 0.3));
  border-radius: 50%;
  animation: formGlow 0.8s ease-out;
}

/* 进化特效动画 */
@keyframes evolveFlash {
  0% { 
    opacity: 0; 
    transform: scale(0.5); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
  100% { 
    opacity: 0; 
    transform: scale(1.5); 
  }
}

@keyframes evolveGlow {
  0% { 
    opacity: 0; 
    transform: scale(0); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: scale(1.5); 
  }
}

/* 退化特效动画 */
@keyframes devolveFlash {
  0% { 
    opacity: 0; 
    transform: scale(1.5); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0.5); 
  }
}

@keyframes devolveGlow {
  0% { 
    opacity: 0; 
    transform: scale(1.5); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: scale(0); 
  }
}

/* 形态特效动画 */
@keyframes formFlash {
  0% { 
    opacity: 0; 
    transform: scale(0.5) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg); 
  }
  100% { 
    opacity: 0; 
    transform: scale(1.5) rotate(360deg); 
  }
}

@keyframes formGlow {
  0% { 
    opacity: 0; 
    transform: scale(0) rotate(0deg); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1) rotate(180deg); 
  }
  100% { 
    opacity: 0; 
    transform: scale(1.5) rotate(360deg); 
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .display-mode-controls {
    top: 15px;
    right: 15px;
    flex-direction: column;
    gap: 6px;
  }
  
  .mode-toggle-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
  
  .pokemon-showcase-card {
    max-width: 100%;
    margin: 0 10px;
  }
  
  .pokemon-showcase-card .card-content {
    padding: 20px;
    gap: 20px;
  }
  
  .pokemon-main-info {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .pokemon-showcase-image {
    width: 150px;
    height: 150px;
  }
  
  .pokemon-showcase-card .pokemon-name {
    font-size: 2rem;
    text-align: center;
  }
  
  .pokemon-details {
    text-align: center;
  }
  
  .evolution-comparison .cards-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .pokemon-evolution-card {
    width: 100%;
    max-width: 320px;
  }
  
  .evolution-arrow-container {
    transform: rotate(90deg);
  }
  
  .evolution-display-section {
    width: 95%;
    height: auto;
    min-height: 500px;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .pokemon-showcase-card .card-content {
    padding: 15px;
  }
  
  .pokemon-showcase-image {
    width: 120px;
    height: 120px;
  }
  
  .pokemon-showcase-card .pokemon-name {
    font-size: 1.6rem;
  }
  
  .pokemon-evolution-card {
    width: 100%;
    max-width: 280px;
    height: 300px;
  }
}
</style>